<template>
  <el-table
    v-bind="$attrs"
    :ref="propRef"
  >
    <el-table-column
      v-if="index"
      type="index"
      :fixed="indexFixed"
    />
    <el-table-column
      v-if="selection"
      type="selection"
      :fixed="selectionFixed"
    />
    <template
      v-for="(column, key) in columns"
      :key="key"
    >
      <el-table-column
        v-if="column.slotName"
        v-bind="column"
      >
        <template #default="scope">
          <slot
            :name="column.slotName"
            :scope="scope"
          />
        </template>
      </el-table-column>
      <table-column
        v-else
        :column="column"
      />
    </template>
  </el-table>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';

import TableColumn from './table-column.vue';

export default defineComponent({
  name: 'BaseTable',
  components: {
    TableColumn,
  },
  props: {
    /**
       * @description: 表格列内容
       * @param {*} 默认 []， 必传参数
       */
    columns: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    /**
       * @description: 是否展示第一列的排序
       * @param {*} 默认false，可选： true | false
       */
    index: {
      type: Boolean as PropType<false | true>,
      default: false,
    },
    /**
       * @description: 序号对齐方式
       * @param {*} 默认left，可选： left | right
       */
    indexFixed: {
      type: String as PropType<'left' | 'right'>,
      default: 'left',
    },
    /**
       * @description: 是否可多选
       * @param {*} 默认false，可选： true | false
       */
    selection: {
      type: Boolean as PropType<false | true>,
      default: false,
    },
    /**
       * @description: 多选框对齐方式
       * @param {*} 默认left，可选： left | right
       */
    selectionFixed: {
      type: String as PropType<'left' | 'right'>,
      default: 'left',
    },
    /**
       * @description: ref值
       * @param {*} 默认lfTable
       */
    propRef: {
      type: String,
      default: 'lfTable',
    },
  },
});
</script>
